/* pages/category/category.wxss */
// 设置整个页面高度
page{
  height: 100%;
}
.cates{
  height: 100%;
  .cates_container{
    // 设置滚动区域的高度==》要减去顶部搜索框组件的高度90rpx ==》底部tab栏目不用减去
    /* less中使用calc的时候要注意    ~'calc( 100vh - 90rpx )'  ==> 能不进行计算，完成地转换到wxss中去
    直接使用calc，会先计算完成，在生成wxss文件
    height: calc( 100vh - 90rpx )===>会先计算==>变成 100vh-90=10vh ==>再转到wxss里，得到 height:10vh;
    */
    // height: ~'calc( 100vh - 90rpx )';
    height:calc( 100vh - 90rpx );
    display: flex;
    .left_menu{
      /* 子项 高度 100% flex */
      // 占据整个宽度的2份 2 / 5+2
      flex: 2;
      // 左侧菜单的样式
      .menu_item{
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
      }
      // 左侧菜单选中时的样式
      .active{
        // 设置文字样式为全局设置的红色变量
        color: var(--themeColor);
        // 设置选中时左侧出现边框
        // currentColor ===》 代表了当前元素应用的color颜色值 ==》也就是设置的红色
        border-left: 5rpx solid currentColor;
      }
    }
    .right_content{
       /* 子项 高度 100% flex */
      // 占据整个宽度的5份 5 / 5+2
      flex: 5;
      .goods_group{
        // 商品大标题
        .goods_title{
          height: 80rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          // 文字分隔符
          .delimiter{
            color: #ccc;
            padding: 0 10rpx;
          }
          .title{}
        }
        // 商品列表
        .goods_list{
          display: flex;
          flex-wrap: wrap;
          navigator{
            width: 33.33%;
            text-align: center;
            // 图片占整个view的一半，小一点好看
            image{
              width: 50%;
            }
            .goods_name{}
          }
        }
      }
    }
  }
}